<template name="settings">
    {{> pageHeading title=getPageHeading }}

    <div class="wrapper wrapper-content animated fadeIn">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>{{_ "settings"}}
                        </h5>
                    </div>
                    <div class="ibox-content">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-lg-3 control-label">{{_ "language"}}</label>
                                <div class="col-lg-9">
                                    <select id="cmbMongoclientLanguage"
                                            data-placeholder="{{_ "choose_one"}}"
                                            class="chosen-select form-control"
                                            tabindex="-1">
                                        <option value="en">{{_ "english"}}</option>
                                        <option value="tr">{{_ "turkish"}}</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">{{_ "socket_timeout"}}</label>
                                <div class="col-lg-9">
                                    <div class="input-group m-b">
                                        <input id="inputSocketTimeout" min="0" required="true" type="number"
                                               class="form-control">
                                        <span class="input-group-addon"> {{_ "seconds"}}</span>
                                    </div>
                                    <span class="help-block m-b-none">
                                        {{{_ "socket_timeout_help_block"}}}
                                    </span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">{{_ "conn_timeout"}}</label>
                                <div class="col-lg-9">
                                    <div class="input-group m-b">
                                        <input id="inputConnectionTimeout" min="0" required="true" type="number"
                                               class="form-control">
                                        <span class="input-group-addon"> {{_ "seconds"}}</span>
                                    </div>
                                    <span class="help-block m-b-none">
                                        {{{_ "conn_timeout_help_block"}}}
                                    </span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">{{_ "db_stats_scheduler"}}</label>
                                <div class="col-lg-9">
                                    <div class="input-group m-b">
                                        <input id="inputDBStatsScheduler" min="2000" required="true"
                                               type="number"
                                               class="form-control">
                                        <span class="input-group-addon"> {{_ "miliseconds"}}</span>
                                    </div>
                                    <span class="help-block m-b-none">
                                        {{{_ "db_stats_scheduler_help_block"}}}
                                    </span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">{{_ "size_info_in"}}</label>
                                <div class="col-lg-9">
                                    <select id="cmbScale"
                                            data-placeholder="{{_ "choose_one"}}"
                                            class="chosen-select form-control"
                                            tabindex="-1">
                                        <option>MegaBytes</option>
                                        <option>KiloBytes</option>
                                        <option>Bytes</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">{{_ "default_result_view"}}</label>
                                <div class="col-lg-9">
                                    <select id="cmbResultView"
                                            data-placeholder="{{_ "choose_one"}}"
                                            class="chosen-select form-control"
                                            tabindex="-1">
                                        <option>Jsoneditor</option>
                                        <option>Datatable</option>
                                        <option>Aceeditor</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">{{_ "samples_count"}}</label>
                                <div class="col-lg-9">
                                    <input id="inputAutoCompleteSamplesCount" min="0" required="true" type="number"
                                           class="form-control">
                                    <span class="help-block m-b-none">{{{_ "samples_count_help_block"}}}</span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">{{_ "autocomplete_shortcut"}}</label>
                                <div class="col-lg-9">
                                    <input id="inputAutocompleteShortcut" required="true" type="text"
                                           class="form-control">
                                    <span class="help-block m-b-none">{{{_ "autocomplete_shortcut_help_block"}}}</span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">{{_ "single_tab"}}</label>
                                <div class="col-lg-9">
                                    <div id="divUseSingleTab" class="i-checks">
                                        <input id="inputUseSingleTab" type="checkbox" value=""
                                               class="form-control"
                                               checked=""
                                               style="position: absolute; opacity: 0;"/>
                                        <span class="help-block m-b-none">{{{_ "single_tab_help_block"}}}</span>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">{{_ "show_db_stats"}}</label>
                                <div class="col-lg-9">
                                    <div id="divShowDBStats" class="i-checks">
                                        <input id="inputShowDBStats" type="checkbox" value=""
                                               class="form-control"
                                               checked=""
                                               style="position: absolute; opacity: 0;"/>
                                        <span class="help-block m-b-none">
                                            {{{_ "show_db_stats_help_block"}}}
                                         </span>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">{{_ "toggle_mongoclient_update"}}</label>
                                <div class="col-lg-9">
                                    <div id="divToggleUpdates" class="i-checks">
                                        <input id="inputToggleUpdates" type="checkbox" value=""
                                               class="form-control"
                                               checked=""
                                               style="position: absolute; opacity: 0;"/>
                                        <span class="help-block m-b-none">
                                            {{{_ "toggle_mongoclient_update_help_block"}}}
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="col-lg-3 control-label">{{_ "max_chart_points"}}</label>
                                <div class="col-lg-9">
                                    <input id="inputMaxChartPoints" min="15" required="true"
                                           type="number"
                                           class="form-control">
                                    <span class="help-block m-b-none">
                                        {{{_ "max_chart_points_help_block"}}}
                                    </span>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">{{_ "mongo_binary_path"}}</label>
                                <div class="col-lg-9">
                                    <input id="inputMongoExecutable" required="true" type="text"
                                           class="form-control">
                                    <span class="help-block m-b-none">
                                        {{{_ "mongo_binary_path_help_block" }}}
                                    </span>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-lg-12">
                                    <button id="btnSaveSettings"
                                            class="btn btn-block btn-outline btn-primary ladda-button"
                                            type="button"
                                            data-style="contract">
                                        <strong>{{_ "save"}}</strong></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
